<html><head><meta charset="utf-8"><title>课程总结-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 6-2 课程总结
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                课程总结
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-22 15:36:07
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img3.mukewang.com/5cd9650600010b9106400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">老骥伏枥，志在千里； 烈士暮年，壮心不已。 <p class="author">——曹操</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本专栏以零基础入门开始，从前端的模块化开发开始讲解模块化打包的历史，引出对 Webpack 重要性和解决问题的思考，然后由浅到深的介绍了 Webpack 的基本功能用法，然后是项目优化，最后介绍了 Webpack 的核心功能实现，并且带领大家手动实现了插件和 loader，专栏中实现的插件和 loader 都是本人在实际项目中真实的解决方案。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本专栏总共涉及了入门篇、配置篇、优化篇、原理篇和实战篇 五大主要章节。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">其中入门篇、配置篇和优化篇属于 Webpack 的开发配置，在这三个章节中，我们学习了 Webapck 的基本开发概念，以及日常开发和上线之前项目的优化内容。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">原理篇是介绍 Webpack 的底层实现原理，通过 Webpack 的内核原理来加深 Webpack 的理解，让我们做到「知其所以然」。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后在实战篇，我结合自己项目中的实践，向大家介绍了自己基于 Webpack 打造前端工程化解决方案，包括移动端屏幕适配方案、markdown-loader、还有使用 Webpack 的 API 搭建一个自己的 dev-server、以及最后介绍了通过 stats 来分析项目打包，最后还介绍了如何在一次打包中打出即适配老浏览器的代码有适配现代浏览器的代码。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">markdown-loader 虽然在实战篇介绍的简单，但是我在实际项目中是基于这个 loader 实现了一套使用 markdown 做网站的系统，而且能够将 markdown 中的代码提取出来执行，类似我的开源项目 <a href="http://nodeppt.js.org">nodeppt</a> 也是基于 Webpack 实现的通过 markdown 来转换成网页演示文档。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">介绍这些内容，其实是让大家学会自己思考，专栏虽然简单，但是真正理解 Webpack 的原理，我们是可以使用它来解决实际项目问题的！</p>
</div><div class="cl-preview-section"><h2 id="最后说两句" style="font-size: 30px;">最后说两句</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">结合上面的内容，再多说几句。虽然小伙伴已经看完本专栏，但是本专栏的内容章节比较多，能够真正掌握还需要在日常的开发中多多思考。专栏只是帮大家搭建一个学习 Webpack 的知识框架，真正掌握这个知识架构还需要大家多多实践，遇见了问题之后自己动手解决，「好脑子不如烂笔头」，经过动手解决问题，在实践的过程中才能真正的理解一个知识点。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">也许有的小伙伴在工作中并不会接触 Webpack 的配置，或者项目只需要配置一次 Webpack 之后就不动了，对于这种情况的小伙伴，我希望大家在专栏中能够得到一些启发，当遇见问题需要解决的时候，可以想起来：哦，我们可以通过 Webpack 的方式来解决这个问题！或者我们在学习的过程中能够对非 Webpack 的内容得到一些启发，比如 Babel、PostCSS、Node.js 项目调试等相关内容。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">除了阅读和动手实践，常常思考所学内容，在日常开发实践中遇见问题能够从所学知识上寻找解决的途径也是很重要的。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后说一下，由于本人的能力和时间有限，虽然本人和慕课网方面已经做了很多校正工作，但是不可避免的会出现一些错误，希望大家斧正和理解。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">祝好！</p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/293">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    Webpack 5.0
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/296">
                                                    <div class="next r clearfix">
                                <p>
                                    附录：项目中常用的插件
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>